<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>腾讯地图示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            height: 100%;
            width: 100%;
        }
        .price-label {
            background-color: white;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .price {
            color: #f34336;
            font-size: 16px;
        }
        .ultra-tag {
            display: inline-block;
            padding: 2px 5px;
            background-color: #5560ef;
            color: white;
            border-radius: 3px;
            font-size: 12px;
            margin-top: 3px;
        }
        .fast-tag {
            display: inline-block;
            padding: 2px 5px;
            background-color: #ff8c00;
            color: white;
            border-radius: 3px;
            font-size: 12px;
            margin-top: 3px;
        }
        .station-info {
            font-size: 12px;
            margin-top: 2px;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=DGHBZ-5UUL3-C4I3F-OTYMB-43ODE-KWFAW"></script>
    <script charset="utf-8" src="./js/uni.webview.1.5.6.js"></script>
    <script>
		
		document.addEventListener('UniAppJSBridgeReady', function() {
		    // 向App发送初始化事件
		    uni.postMessage({
		        data: {
		            type: 'init',
		            message: '成功'
		        }
		    })
		}); 
		        
	    // 初始化充电桩markets数据
	    function initMapMakers(markets) {
	        // 清除之前的alert
	        // alert(JSON.stringify(markets))
	        
	        // 确保地图实例已经创建
	        if (!window.mapInstance) {
	            // 如果地图还没初始化，则创建地图
	            var center = new TMap.LatLng(39.90469, 116.40717);
	            window.mapInstance = new TMap.Map('container', {
	                center: center,
	                zoom: 14,
	                viewMode: '2D'
	            });
	        }
	        
	        // 使用addCustomMarkers函数添加标记
	        addCustomMarkers(window.mapInstance, markets);
	    }
		
		
		 
		
        // 初始化地图
        function initMap() {
            // 创建地图实例并保存为全局变量
            var center = new TMap.LatLng(39.90469, 116.40717);
            window.mapInstance = new TMap.Map('container', {
                center: center,
                zoom: 14,
                viewMode: '2D'
            });
            
            // 注意：不再在这里添加标记，而是等待initMapMakers被调用
        }

        // 添加自定义标点和标签
        function addCustomMarkers(map, markers) {
            // 清除可能存在的之前的标记
            map.remove(map.getAllOverlays(['marker', 'label']));
            
            var markerList = [];
            var geometries = [];
            var labelGeometries = [];

            // 处理每个标点数据
            markers.forEach(function(marker, index) {
                // 处理当前位置标记（id为current-location的点）
                if (marker.id === "current-location" || marker.id === 99999) {
                    // 添加当前位置标记
                    new TMap.MultiMarker({
                        map: map,
                        styles: {
                            "current": new TMap.MarkerStyle({
                                "width": marker.width || 22,
                                "height": marker.height || 32,
                                "anchor": { x: marker.width/2 || 11, y: marker.height || 32 },
                            })
                        },
                        geometries: [{
                            "id": "current-location",
                            "styleId": "current",
                            "position": new TMap.LatLng(marker.latitude, marker.longitude),
                            "properties": {
                                "title": "当前位置"
                            }
                        }]
                    });
                    return;
                }

                // 为其他点添加标记和标签
                geometries.push({
                    "id": "marker-" + marker.id,
                    "styleId": "station",
                    "position": new TMap.LatLng(marker.latitude, marker.longitude),
                    "properties": {
                        "title": "站点" + marker.id
                    }
                });

                // 创建价格标签内容
                if (marker.custom) {
                    var labelContent = document.createElement("div");
                    labelContent.className = "price-label";
                    
                    // 创建价格显示
                    var priceDiv = document.createElement("div");
                    priceDiv.className = "price";
                    priceDiv.textContent = "¥" + marker.custom.money.toFixed(2) + "/度";
                    
                    // 创建标签
                    var tagDiv = document.createElement("div");
                    tagDiv.className = marker.custom.type === 1 ? "fast-tag" : "ultra-tag";
                    tagDiv.textContent = marker.custom.type === 1 ? "快充" : "超充";
                    
                    // 创建充电桩信息
                    var infoDiv = document.createElement("div");
                    infoDiv.className = "station-info";
                    infoDiv.textContent = "可用: " + marker.custom.available + "/" + marker.custom.total;
                    
                    // 组合标签内容
                    labelContent.appendChild(priceDiv);
                    labelContent.appendChild(tagDiv);
                    labelContent.appendChild(infoDiv);
                    
                    // 添加标签几何信息
                    labelGeometries.push({
                        "id": "label-" + marker.id,
                        "styleId": "label",
                        "position": new TMap.LatLng(marker.latitude, marker.longitude),
                        "content": labelContent.outerHTML
                    });
                }
            });

            // 添加所有充电站标记
            if (geometries.length > 0) {
                new TMap.MultiMarker({
                    map: map,
                    styles: {
                        "station": new TMap.MarkerStyle({
                            "width": 30,
                            "height": 30,
                            "anchor": { x: 15, y: 30 },
                        })
                    },
                    geometries: geometries
                });
            }

            // 添加所有标签
            if (labelGeometries.length > 0) {
                new TMap.MultiLabel({
                    map: map,
                    styles: {
                        label: new TMap.LabelStyle({
                            color: '#333',
                            size: 14,
                            offset: { x: 0, y: -35 }, // 向上偏移，避免遮挡标记
                            angle: 0,
                            alignment: 'center',
                            verticalAlignment: 'middle'
                        })
                    },
                    geometries: labelGeometries
                });
            }
        }

        // 初始化地图
        window.onload = initMap;
    </script>
</body>
</html>
